<template>
  <div>
    <el-row type="flex" justify="space-around" :gutter="0" class="cards">
      <el-col :span="11">
        <el-card>
          <el-dialog
            :title="title"
            :visible.sync="display"
            :before-close="handleClose"
          >
            <import-repo
              @click="handleClose"
              :dialogType="dialogType"
            ></import-repo>
          </el-dialog>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.basic_information") }}</span>
          </div>
          <div>
            <el-row>
              <el-col :span="4" class="ky-left"> {{ $t("name") }}: </el-col>
              <el-col :span="20" class="ky-right"> {{ form.name }} </el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.tag") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("description") }}:
              </el-col>
              <el-col :span="20" class="ky-right">
                {{ form.description }}
              </el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.backend_id") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="4" class="ky-left"> {{ $t("type") }}: </el-col>
              <el-col :span="20" class="ky-right">
                {{ form.contentType }}
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="11">
        <!-- <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.content_count") }}</span>
          </div>
          <el-table
            border
            :data="tableData"
            stripe
            size="medium"
            style="width: 100%"
            :header-cell-style="{ color: 'black' }"
            :cell-style="{ color: 'black' }"
          >
            <el-table-column :label="$t('patch.content_type')">
              <el-table-column label="ID">
                <template slot-scope="scope">
                  {{ scope.row.success }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('patch.package')">
                <template slot-scope="scope">
                  {{ scope.row.failed }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-card> -->
        <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.sync_status") }}</span>
          </div>
          <div>
            <!-- <el-row>
                <el-col :span="4" class="ky-left">
                  {{ $t("patch.sync_interval") }}:
                </el-col>
                <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
              </el-row> -->
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.last_sync") }}:
              </el-col>
              <el-col :span="20" class="ky-right">
                {{ form.lastSyncTime }}
              </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="4" class="ky-left">
                  {{ $t("patch.next_sync") }}:
                </el-col>
                <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
              </el-row> -->
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.sync_status") }}:
              </el-col>
              <el-col :span="20" class="ky-right">
                {{ form.lastSyncStatus }}
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" :gutter="0" class="cards">
      <el-col :span="11">
        <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.sync_setting") }}</span>
          </div>
          <div>
            <el-row>
              <el-col :span="4" class="ky-left"
                >{{ $t("patch.upstreamUrl") }}:
              </el-col>
              <el-col :span="20" class="ky-right">{{ form.url }} </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.publish_at") }}:
              </el-col>
              <el-col :span="20" class="ky-right">
                {{ form.updatedAt }}
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="5">
        <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.upload_packages") }}</span>
          </div>
          <div>
            <authorization-button
              class="kylin-button"
              @click="handleRepoUpload"
              name="Repository:uploadRpm"
            >
              {{ $t("upload_file") }}
            </authorization-button>
            <p>
              {{ $t("patch.package_file_support") }}
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card>
          <div slot="header" class="card-header">
            <span class="kylin-card-header-label">{{ $t("patch.upload_CVE") }}</span>
          </div>
          <div>
            <authorization-button class="kylin-search-button" @click="handleCVEUpload">
              {{ $t("upload_file") }}
            </authorization-button>
            <p>
              {{ $t("patch.CVE_file_support") }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row type="flex" justify="space-around" :gutter="0" class="cards">
      <el-col :span="11">
        <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("patch.sync_status") }}</span>
          </div>
          <div>
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.sync_interval") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.last_sync") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.next_sync") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="ky-left">
                {{ $t("patch.sync_status") }}:
              </el-col>
              <el-col :span="20" class="ky-right"> {{ 1 }} </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="11">
        <el-card>
          <div slot="header" class="card-header">
            <span>{{ $t("system.batch_information") }}</span>
          </div>
          <div>No distribution available</div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import importRepo from "../form/importRepo.vue";
import { getProductRepoDetail } from "@/api/patch";
import AuthorizationButton from "@/components/AuthorizationButton";
export default {
  components: {
    Page,
    kyTable,
    importRepo,
    AuthorizationButton,
  },
  props: {
    form: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dialogType: "",
      type: "import_repo",
      title: "",
      display: false,
      tableData: [],
      fileList: [],
    };
  },
  methods: {
    getProductRepoDetail,
    handleRepoUpload() {
      this.dialogType = "repo";
      this.display = true;
    },
    handleCVEUpload() {
      this.dialogType = "CVE";
      this.display = true;
    },
    handleClose(type) {
      this.display = false;
      this.title = "";
    },
  },
  watch: {
    form: {
      handler(newvalue, oldvalue) {
        if (!this.$store.state.patch.selectRepo) {
          this.$store.commit("set_repo", { selectRepo: newvalue.name });
        }
      },
      deep: true,
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cards {
  margin-bottom: 20px;
}
</style>